<template>
  <div>
    <Title />
    <el-container>
      <el-main width="60%">
        <img src="@/assets/imgs/a.svg" alt="" style="width:60%;">
      </el-main>
      <el-aside width="40%">
        <el-card class="card" shadow="always">
          <el-tabs v-model="activeName" @tab-click="clickTab">
            <el-tab-pane label="快捷登录" name="first">
              <el-form ref="quickLoginRef" style="padding-top:20px;" :model="quickLoginInfo" :rules="loginFormRules">
                <el-form-item prop="phone">
                  <el-input v-model="quickLoginInfo.phone" placeholder="手机号" maxlength="11" minlength="11" />
                </el-form-item>
                <el-form-item prop="validateCode">
                  <el-input v-model="quickLoginInfo.validateCode" placeholder="验证码" maxlength="6" minlength="6"><template slot="append">
                    <el-button @click="getValidateCode">获取验证码</el-button></template></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" class="btn-login" @click="quickLogin">登录</el-button>
                  <p style="font-size:12px;">没有账号？<router-link to="/register" style="color:#3CB371;">立即注册</router-link></p>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="密码登录" name="second">
              <el-form ref="pwdLoginRef" style="padding-top:20px;" :rules="loginFormRules" :model="pwdLoginInfo">
                <el-form-item prop="userName">
                  <el-input v-model="pwdLoginInfo.userName" placeholder="用户名" />
                </el-form-item>
                <el-form-item prop="passWord">
                  <el-input v-model="pwdLoginInfo.passWord" placeholder="密码" show-password />
                  <p><router-link to="/forgetPassword" style="color:#3CB371;font-size:12px;float:right;text-decoration:none;">忘记密码？</router-link></p>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" class="btn-login" @click="pwdLogin">登录</el-button>
                </el-form-item>
                <p style="font-size:12px;">没有账号？<router-link to="/register" style="color:#3CB371;">立即注册</router-link></p>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-aside>
    </el-container>
    <el-footer />
  </div>
</template>

<script>

import '@/static/css/login.css'
import Title from '@/components/title.vue'
import {login,getValidateCode} from '@/api/user'

export default {
  name: 'Login',
  components: { Title },
  data() {
    return {
      activeName: 'first',
      quickLoginInfo: {
        phone: '',
        validateCode: ''
      },
      pwdLoginInfo: {
        userName: '',
        passWord: ''
      },
      loginFormRules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号不合法', trigger: 'blur' }
        ],
        validateCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入有效的验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    clickTab(tab, event) {
      // console.log(tab, event)
      if (event.target.id === 'tab-first') { // 快捷登录
        this.quickLogin()
      } else { // 密码登录
        this.pwdLogin()
      }
    },
    async getValidateCode() {
      const res = await getValidateCode()
      console.log(res)
    },
    quickLogin() {
      this.$refs.quickLoginRef.validate(async valid => {
        if (!valid) return
        const res=await login(this.quickLoginInfo);
        console.log(res)
        if (res.code === 200) {
          this.$store.dispatch({ //将token和userInfo存到store
            type:'user/login',
            token:res.data.token,
            userInfo:JSON.stringify(res.data.userInfo)
          })
          this.$message.success('登录成功')
          this.$router.push('/home/index')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    pwdLogin() {
      this.$refs.pwdLoginRef.validate(async valid => {
        if (!valid) return
        const res=await login(this.pwdLoginInfo);
        if (res.code === 200) {
          this.$store.dispatch({ //将token和userInfo存到store
            type:'user/login',
            token:res.data.token,
            userInfo:JSON.stringify(res.data.userInfo)
          })
          this.$message.success('登录成功')
          this.$router.push('/home/index')
        } else {
          this.$message.error('登录失败')
        }
      })
    }
  }
}
</script>
<style scoped>
.card{
    width:60%;
    padding:20px 20px 0 20px;
}
</style>
